<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-09-02 10:44:59
 * @LastEditTime: 2023-09-22 19:57:55
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \htmld:\Developer\WGJ\VSCode_WorkSpace\Web\vue\vue_test\src\App.vue
 * @Description:
-->
<template>
    <div class="app">
        <h1>{{ msg }}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName" />
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (第一种写法使用@或v-on)-->
        <Student @atguigu.once="getStudentName" />

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (第二种写法，使用ref)-->
        <!-- <Student ref="student" /> -->
    </div>
</template>

<script>
// 引入组件
import School from './components/School.vue';
import Student from './components/Student.vue';

export default {
    name: 'App',
    components: {
        Student,
        School,
    },
    data() {
        return {
            msg: '你好啊',
        };
    },
    methods: {
        getSchoolName(name) {
            console.log('App收到了学校名:', name);
        },
        getStudentName(name, ...params) {
            console.log('App收到了学生名:', name, params);
        },
    },
    mounted() {
        // this.$refs.student.on('atguigu', this.getStudentName);
        // this.$refs.student.$once('atguigu', this.getStudentName);
    },
};
</script>

<style scoped>
.app {
    background-color: gray;
    padding: 5px;
}
</style>
